Component interaction with services

דוגמא לקשר בין קומפוננטות על ידי services.

נקרא לקומפוננטה all-users כדי להציג את רשימת המשתמשים.

app.component.html

<div class="mt-3 container">
  <h3>All Users</h3>
  <app-all-users></app-all-users>
</div>

את הקומפוננטה של המשתמשים נחבר ל-service של users.

all-users.component.ts

export class AllUsersComponent implements OnInit {
  constructor(private userService: UserService) {}

  users: User[];
  ngOnInit(): void {
    this.users = this.userService.users;
  }

  showDetails(user: User) {
    this.userService.showUserDetails(user);
  }
}

בדף נציג את רשימת המשתמשים. יש עמודה של שם, של תפקיד וכפתור שמציג בצד את הפרטים של המשתמש. לחיצה על הכפתור תפנה לקומפוננטה user-detail לבצגת הפרטים.

לחיצה על הכפתור קוראת לפונקציה showDetails שהיא קוראת לפונקציה showUserDetails מתוך ה-service.

all-users.component.html

<div class="container">
  <div class="user-container">
    <div class="row">
      <div class="col">
        <div
          class="row mb-3"
          style="border: 1px solid #000; padding: 10px"
          *ngFor="let user of users">

          <div class="col">{{ user.name }}</div>
          <div class="col">{{ user.job }}</div>
          <div class="col">
            <button (click)="showDetails(user)">Details</button>
          </div>

        </div>
      </div>
      <div class="col"><app-user-detail></app-user-detail></div>
    </div>
  </div>
</div>

בקומפוננטה של פרטי המשתמש נקבל את הלחיצה על הכפתור.

user-detail.component.ts

export class UserDetailComponent implements OnInit {
  constructor(private userService: UserService) {}
  user = {} as any;
  ngOnInit(): void {
    this.userService.onShowDetailsClicked.subscribe(
      (data) => (this.user = data)
    );
  }
}

בדף הקומפוננטה של פרטי המשתמש תציג את הפרטים של המשתמש שנבחר.

user-detail.component.html

<div class="card" style="width: 18rem" *ngIf="user.name != undefined">
  <img src="https://via.placeholder.com/150" class="card-img-top" />
  <div class="card-body">
    <h5 class="card-title">{{ user.name }}</h5>
    <p class="card-text">
      Job: {{ user.job }} <br />
      Gender: {{ user.gender }} <br />
      Country: {{ user.country }} <br />
      Age: {{ user.age }}
    </p>
  </div>
</div>

ב-service נקבל את פרטי המשתמש ונפעיל את האירוע של הלחיצה של פרטי המשתמש.

user-detail.component.ts

export class UserService {
  constructor() {}
  users = [
    {
      name: 'John',
      job: 'Teacher',
      gender: 'Male',
      country: 'United States',
      age: 35,
    },
    {
      name: 'Mark',
      job: 'Deginer',
      gender: 'Male',
      country: 'Israel',
      age: 25,
    },
    {
      name: 'Debby',
      job: 'Doctor',
      gender: 'Female',
      country: 'India',
      age: 43,
    },
    {
      name: 'Sara',
      job: 'Seller',
      gender: 'Female',
      country: 'Holand',
      age: 19,
    },
  ];
  
  onShowDetailsClicked = new EventEmitter<User>();

  showUserDetails(user: User) {
    this.onShowDetailsClicked.emit(user);
  }
}